<template>
    <div class="static-controller-container flex-center-col-start">
        <div class="static-title flex-center-col" >
            文件列表
        </div>
        <div
          style="width: 100%;height:60px;display: flex;justify-content: left;align-items: center;padding-left: 50px">

<!--     --------------------------------批量操作按钮区----------------------------------------------  -->
             <el-button size="mini" type="danger" @click="allowSelection()" v-show="!obj.selection.showSelectionBtn">批量操作</el-button>
             <el-button size="mini" type="danger" @click="deleteSelectedFileList()" v-show="obj.selection.showSelectionBtn">批量删除</el-button>
             <el-button size="mini" type="info" @click="cancelSelection()" v-show="obj.selection.showSelectionBtn">取消</el-button>
<!--     --------------------------------批量操作按钮区----------------------------------------------  -->
        </div>
        <div class="static-resource-box ">
            <el-table
                    @selection-change="handleSelectionChange"
                    ref="table"
                    :data="obj.filesList"
                    border
                    stripe
                    style="width: 100%"
                    max-height="1800px"
            >
                <el-table-column
                        v-if="obj.selection.showSelectionBtn"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="文件名"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="文件类型"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        width="300"
                        label="文件url">


                    <template #default="scope">

                        <a

                                    target="_blank"
                                    :href="scope.row.url"
                            @mouseenter="preShowFile(scope.row.url,$event)"
                            @mouseleave="obj.file.show=false"
                        >
                                {{scope.row.url}}
                        </a>


                    </template>
                </el-table-column>

                <el-table-column label="操作"
                                 fixed="right"
                                 width="150"
                >

                    <template #default="scope">

                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row.number,scope.row.url)"
                        >删除</el-button>

                        <el-button
                                size="mini"
                                type="warning"
                                @click="preShowFile(scope.row.url,$event)"
                        >预览</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex-center-col"  style="margin-top: 20px">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="obj.currentPage"
                    :page-size="obj.respObj.pageSize"
                    layout="total, prev, pager, next"
                    :total="obj.respObj.total">
            </el-pagination>
        </div>
    </div>

    <el-image :src="obj.file.src" v-show="obj.file.show"
         class="static-resource-image" :style="{left:obj.file.left,top:obj.file.top}" />
</template>

<script>
    import {reactive, ref} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import service from "@/assets/js/service";
    import {goToElement, goTop, successMessage} from "@/assets/js/utils";
    export default {
        name: "StaticResourceController",
        setup(){
            let table =ref()


            let obj=reactive({
                filesList:[],
                selection:{
                    selectedFileList:[],
                    showSelectionBtn:false
                },

                respObj:{},
                currentPage:1,
                file:{
                    show:false,
                    src:"",
                    left:0,
                    top:0
                }
            })


            /**
             * 没有返回值
             * */
            let initFilesList=async (pageNum)=>{
                let list=await getFilesList(pageNum)
                if(list.code===200){
                    obj.respObj=list.data
                    obj.filesList=list.data.list
                }

            }
            function getFilesList(pageNum){
              return service.getAllStaticFiles(pageNum)
            }

            let handleDelete=(index,url)=>{
                let choose =confirm("确定删除?")
                if(choose){
                    let arr=[]
                    arr.push(url)
                    service.deleteStaticFiles(arr).then(resp=>{
                        if(resp.code === 200){
                            successMessage("删除成功")
                            obj.filesList.splice(index-1,1)
                        }
                    })
                }

            }

            let handleEdit=(index,row)=>{
                console.log(index)
                console.log(row)
            }

            let handleCurrentChange=(page)=>{
                obj.currentPage=page
                initFilesList(page)
                goTop()
            }

            // 显示预览框
            let preShowFile=(src,event)=>{

                if(obj.file.show){
                    obj.file.show=false
                }else{
                    // 获得鼠标位置
                    let x = event.pageX
                    let y=event.pageY

                    // 跳转到鼠标位置
                    // window.scrollTo(x,y-100)

                    // 设置图片显示位置
                    obj.file.left=x-300+'px'
                    obj.file.top=y+50+'px'
                    obj.file.show=true
                    obj.file.src=src
                }

            }
            // 隐藏预览框
            let hiddenFile=()=>{
                obj.file.show=false
            }



// -------------------批量处理按钮绑定方法-----------------------
            // 允许批量操作
            let allowSelection=()=>{
                obj.selection.showSelectionBtn=true
            }
            // 全部取消选择
            let cancelSelection=()=>{
                obj.selection.showSelectionBtn=false
            }

            // 批量删除文件
            let deleteSelectedFileList=()=>{
                let choose=confirm("确定删除？")
                if(choose){
                    // 获得url数组
                    let arr= obj.selection.selectedFileList.map(file=>file.url)

                    // 删除操作
                    service.deleteStaticFiles(arr).then(resp=>{
                        if(resp.code === 200){

                            initFilesList(1)
                            obj.selection.showSelectionBtn=false
                            successMessage("批量删除成功")
                        }
                    })
                }

            }
            // 获取批量选择的文件数组
            let handleSelectionChange=(val)=>{
                // 如下格式：
                // 0: Proxy {name: 'null2e74db92d082410b.jpg', number: 2, realName: '-null2e74db92d082410b.jpg', type: 'jpg', url: 'http://localhost:8090/image/-null2e74db92d082410b.jpg'}
                // 1: Proxy {name: 'DSC_2314.JPG', number: 3, realName: '190b94e17314-DSC_2314.JPG', type: 'JPG', url: 'http://localhost:8090/image/190b94e17314-DSC_2314.JPG'}
                // 2: Proxy {name: '1@86HAI_7(7{9RU}5MRLI.png', number: 4, realName: '1@86HAI_7(7{9RU}5MRLI.png', type: 'png', url: 'http://localhost:8090/image/1@86HAI_7(7{9RU}5MRLI.png'}
                // length: 3
                obj.selection.selectedFileList=val
            }

            onMounted(()=>{
                initFilesList()
            })
            return {
                obj,
                handleEdit,
                handleCurrentChange,
                preShowFile,
                hiddenFile,
                handleDelete,
                allowSelection,
                handleSelectionChange,
                cancelSelection,
                deleteSelectedFileList,
                table
            }
        }
    }
</script>

<style scoped lang="less">
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*background: white;*/
        background-color: #4FA485;
    }
    .static-controller-container{
        width: 100%;
        min-height: 100%;
        background-color: white;

        .static-title{
            min-height: 5%;
            font-size: 20px;
        }


        .static-resource-box{
            width: 95%;
            min-height: 90%;
            max-height: 90%;
            overflow-y: auto;
            a{

                color: black;

            }

        }
    }

    .static-resource-image{
        position: absolute;
        left: 500px;
        top: 200px;
        z-index: 9999;
        width: 200px;
        height:200px;
        object-fit: cover;
        border: 2px solid #028090;
      }
</style>